import React from 'react'
import { UdTable, UdFilter, http, IUdColumn, validators } from '@/lib'
import { Tooltip, Select, Input } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import customerApis from '@/apis/CustomerManage'
import UdSelect from '@/components/UdFormControls/UdSelect'
const { Option } = Select
export default class SelectDistributor extends React.Component<IProps> {
  private filterForm: WrappedFormUtils = {} as WrappedFormUtils
  private brandList: any[] = this.props.brandList //品牌公司
  private conditions: any[] = [
    {
      label: '客户编码',
      id: 'acctCode',
      initialValue: this.props.acctCode,
      render: () => {
        return <Input disabled placeholder="请输入客户编码" />
      },
    },
    {
      label: '客户名称',
      id: 'acctName',
      initialValue: this.props.acctName,
      render: () => {
        return <Input disabled placeholder="请输入客户名称" />
      },
    },
    {
      label: '品牌公司',
      id: 'mdmCompanyCode',
      initialValue: this.props.brandCode,
      render: <UdSelect disabled showSearch allowClear={false} options={this.brandList} />,
    },
    {
      label: '下级客户类型',
      id: 'acctType',
      rules: [validators.required],
      initialValue: 'Terminal',
      render: () => (
        <Select placeholder="请选择下级客户类型" allowClear={false}>
          <Option key={'Terminal'} value="Distributor">
            分销商
          </Option>
          <Option key={'Terminal'} value="Terminal">
            终端
          </Option>
        </Select>
      ),
    },
  ]
  private columns: IUdColumn<any>[] = [
    ['序号', 'id', (text, record, index) => index + 1, { width: '50px' }],
    { title: '客户编码', dataIndex: 'acctCode', minWidth: '100px' },
    { title: '客户名称', dataIndex: 'acctName', minWidth: '60px' },
    {
      title: '客户类型',
      dataIndex: 'acctType',
      minWidth: '80px',
      render: (text, record, index) => {
        let TYPE_ENUM = {
          Terminal: '终端',
          Distributor: '分销商',
        }
        return TYPE_ENUM[text]
      },
    },
    { title: '联系人电话', dataIndex: 'salemanMobilePhone', minWidth: '80px' },
    {
      title: '地址',
      dataIndex: 'address',
      width: '280px',
      render: (text, record) => {
        return (
          <Tooltip title={`${record.address}`}>
            <div style={{ width: '280px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
              {`${record.address}`}
            </div>
          </Tooltip>
        )
      },
    },
  ]

  state: IState = {
    searchValues: {
      acctCode: this.props.acctCode,
      acctName: this.props.acctName,
      mdmCompanyCode: this.props.brandCode,
      acctType: 'Terminal',
    },
    dataSource: [],
    loading: false,
    page: 1,
    size: 10,
    total: 0,
  }

  render() {
    let { loading, dataSource } = this.state
    return (
      <>
        <UdFilter
          getForm={form => {
            this.filterForm = form
          }}
          items={this.conditions}
          onSearch={values => {
            this.handleSearch(values)
          }}
          loading={loading}
          resetAfter={this.resetFilterHandle}
        />
        <UdTable
          rowKey="acctCode"
          columns={this.columns}
          loading={loading}
          dataSource={dataSource}
          pagination={{
            current: this.state.page,
            pageSize: this.state.size,
            total: this.state.total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40'],
            showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
          }}
          onChange={this.handleChangePage}
        ></UdTable>
      </>
    )
  }

  componentDidMount() {
    this.getTableData()
  }
  private handleChangePage = pagination => {
    const { current: page, pageSize: size } = pagination
    this.setState({ page, size }, () => {
      this.getTableData()
    })
  }

  private onOk = e => {
    e.close()
  }

  private handleSearch = (values: any) => {
    this.setState({ searchValues: values, dataSource: [], page: 1, total: 0 }, () => {
      this.getTableData()
    })
  }

  private resetFilterHandle = (form: WrappedFormUtils) => {
    this.setState({ dataSource: [], page: 1, total: 0, searchValues: form.getFieldsValue() }, () => {
      this.getTableData()
    })
  }

  private getTableData = async () => {
    this.setState({ loading: true })
    let { page, size, searchValues } = this.state
    http
      .get(customerApis.getLowerLevelList, {
        params: {
          page,
          size,
          ...searchValues,
        },
      })
      .then(res => {
        const dataSource = res.data?.content
        this.setState({
          dataSource,
          total: res.data.totalElements,
        })
      })
      .finally(() => {
        this.setState({
          loading: false,
        })
      })
  }
}

interface IProps {
  brandList: Record<string, any>[]
  acctCode: string
  acctName: string
  brandCode: string
}
interface IState {
  dataSource: Record<string, any>[]
  loading: boolean
  searchValues?: {}
  page: number
  size: number
  total: number
}
